<%--
  Created by IntelliJ IDEA.
  User: hdwx
  Date: 2016/12/26
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>Title</title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #nav_background a{
            text-decoration: none;
            color: white;
        }
        #nav_background{
            background-color: #1d1a34;
            color: white;
            height: 70px;
        }
        #nav_background>div{
            position: relative;
            height: 70px;
            line-height: 70px;
            float: left;
        }
        #nav_background #logo img{
            position: relative;
            top:15px;
            left:70px;
        }
        #nav{
            z-index: 11;
            position: relative;
            left: 100px;
            height: 70px;
            line-height:70px;
        }
        #nav a{
            font-size: 18px;
            padding: 26px 15px;
            margin: 0;
            border: 0;
        }
        #nav a:hover{
            background-color: #2f3247;
        }
        #nav_background #search,#nav_background #user_do{
            position: relative;
            height: 40px;
            line-height: 40px;
            width: auto;
            top:15px;
            left:120px;
            float: left;
        }
        #nav_background #search #sel1{
            position: absolute;
            width:60px;
            height: 140px;
            z-index: 5;
        }
        #nav_background #search input{
            background-color: #1d1a34;
            border-color: #40a9ff;
            height: 40px;
            position: relative;
            top:0px;
            width: 280px;;
            padding: 5px 70px;
            color: white;
        }
        #nav_background #search button{
            outline: none;
            background-color: #1d1a34;
            color: white;
            position: absolute;
            top:0;
            left:0;
            width: 60px;
            height: 27px;
            line-height: 27px;
            z-index: 10;
            border: 0;
            margin: 6px 2px;
            border: none;
            border-right: 1px solid white;
        }
        #nav_background #search #img{
            position: absolute;
            top:0;
            right: 0;
            height: 40px;
            width:40px;
            background-color: #40a9ff;

        }
        #nav_background #search  #img img{
            position: relative;
            margin: 10px;
        }
        #nav_background #user_do a{
            text-decoration: none;
            margin-left: 20px;
        }
        .mymark{
            margin-left: 4px;
            margin-bottom: 2px;
            display: inline-block;
            width: 0px;
            height: 0px;
            border-top: 4px solid;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        #nav_background #search #sel1 ul{
            opacity:0;
            z-index: 5;
            height: 92px;
            position: relative;
            top: 40px;
            border: 1px solid #e2e2e2;
        }
        #nav_background #search #sel1 li{
            list-style:none;
            color: black;
            background-color: white;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        #nav_background #search #sel1 li:hover{
            cursor: pointer;
            background-color: #e2e2e2;
        }
        .hidden{
            display: none;
            visibility: hidden;
        }
    </style>
    <script src="jQuery/jquery-1.11.3.js"></script>
    <script src="js/home.js"></script>
</head>
<body>
    <div id="nav_background">
        <%-- logo图片 --%>
        <div id="logo"><a href="home.jsp"><img src="static/img/logo1.png"></a></div>
        <%-- 导航标签 --%>
        <div id="nav">
            <a href="home.jsp">首页</a
            ><a href="videolist">微课</a
            ><a href="#">文档</a
            ><a href="#">教师</a
            ><a href="#">学校</a
            ><a href="#">大赛</a
            ><a href="#">考核</a
            ><a href="#">资讯</a
            ><a href="#">统计</a>
        </div>
        <div>
            <%-- 模糊搜索 --%>
            <div id="search">
                <div id="sel1" ><button name="wk"><span id="seled">微课</span><span class="mymark"></span></button>
                    <ul class="hidden">
                        <li id="sel2">文档</li>
                        <li id="sel3">教师</li>
                        <li id="sel4">学校</li>
                    </ul>
                </div>
                <input type="text" placeholder="请输入搜索关键字" class="search_content">
                <a href="#"><div id="img" class="search_course"><img src="static/img/seach.gif"> </div></a>
            </div>
            <%-- 登录注册 --%>
            <div id="user_do">
                <%
                    HttpSession session1 = request.getSession(false);
                    if(session1!=null&&session1.getAttribute("account")!=null){
                %>
                     <h5 style="margin-left: 20px">欢迎用户：<%=session1.getAttribute("account")%>  <a href="exit.do" style="margin-left: 20px">注销</a></h5>
                <%
                }else{
                %>
                    <a href="login.jsp"><img src="static/img/ico_2.png"> 登录</a>
                    <a href="register.jsp"><img src="static/img/ico_1.png"> 注册</a>
                <%
                    }
                %>
            </div>
        </div>

    </div>
</body>
</html>
